<template>
	<div>
		<!-- 标题 -->
		<div class="title">
			<div class="back">
				<img style="width: 28px; height: 28px" src="../assets/images/back.png" />
				<span style="font-size: 16px">返回</span>
			</div>
			<div class="info">
				<span>本地圈</span>
			</div>
			<div>
				<img style="margin-top: 5px" src="../assets/images/message.png" />
			</div>
		</div>
		<div class="content">
			<van-tabs>
				<van-tab v-for="(item,index) in list" :key="index" :title="item.name">
          <div>
            <div style="width:100%; height:2px; background-color:#f1f1f1;"></div>
            	<my-list>
						<template v-slot:content='content'>
							<dynamic-item></dynamic-item>
              <!-- <div class="item">{{content.data.name}}</div> -->
						</template>
					</my-list>
          </div>
				
				</van-tab>
				
			</van-tabs>
		</div>
	</div>
</template>
<script>
import MyList from '..//components/MyList.vue';
import DynamicItem from '../components/DynamicItem.vue';
export default {
	components: { MyList, DynamicItem },
	data () {
		return {
      list:[{name:'最新动态'},{name:'好友动态'},{name:'我的动态'}]
		};
	},
	methods: {
		getList () { }
	}
}
</script>
<style scoped>
/* 标题 */
.title {
	background-color: #ed414a;
	height: 44px;
	color: white;
	font-size: 18px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px 0 5px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.title .back {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.content {
	position: absolute;
	top: 54px;
	left: 0;
	right: 0;
	bottom: 50px;
	overflow: auto;
	z-index: 1;
}
.item{
  height: auto;
}
</style>
